<template>
    <div class="content-container">
        <left-content
            ref="leftContent"
            class="left-conent"
            @checkMacArrayChange="onCheckMacArrayChange"
            @handleCurrentChange="handleCurrentChange"
			:isEdit="isEdit"
        ></left-content>
        <threed-view class="threed-view" ref="threedView"
			:isEdit="isEdit"
			@onElementClick="onThreeDElementClick" 
			@changeEdit="changeEdit"
		/>
    </div>
</template> 

<script>
import LeftContent from "@/components/ThreeDScene/LeftContent/index";
import ThreeDBaseCom from "@/components/ThreeDScene/threeDBaseCom.vue";
import threeData from "@/utils/testThreeData.js";
import eventBus from "@/eventBus/bus";

export default {
    // 注册组件
    components: {
        "threed-view": ThreeDBaseCom,
        "left-content": LeftContent,
    },

    data() {
        //数据
        return {
			isEdit: true
		};
    },

    methods: {
		changeEdit(){
			this.isEdit = !this.isEdit;
		},
        onThreeDElementClick(inId) {
            this.$refs.leftContent.onThreeDElementClick(inId);
        },

        onCheckMacArrayChange(val) {
            console.log(
                `page onCheckMacArrayChange --- s ---  ${new Date().getTime()} `
            );
            let tempPartIds = [];
            val.forEach(element => {
                tempPartIds.push(element)
            });
            this.$refs.threedView.setElemnetsColorsAndResetOther(tempPartIds);
        },

        /**
         * left 单选位号
         */
        handleCurrentChange(val) {
            this.$refs.threedView.flyTo3DNumber(val.partsCode);
        }
    },

    created() {},

    mounted() {
        this.$refs.threedView.initEngineAndScene(
            threeData.modelJsonUrl,
            threeData.modelId,
            threeData.initView
        );
    },
};
</script>

<style lang="scss" scoped>

.content-container {
    display: flex;
    justify-content: flex-start;
    padding-top: 15px;
    width: 100%;
    height: 100%;

    .left-conent {
        position: relative;
        // width: 20%;
        width: 390px;
        height: 100%;
        box-sizing: border-box;
    }

    .threed-view {
        width: calc(100% - 300px);
        height: calc(100% - 0px);
    }
}
</style>